<!DOCTYPE html public '-//W3C//DTD HTML 4.01//EN'
  'http://www.w3.org/TR/html4/strict.dtd'>
<html lang="en">
<head profile="http://www.w3.org/2006/03/hcard">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>CSS Grid Template Module</title>
  <link rel="stylesheet" type="text/css" href="../default.css">
  <link rel="stylesheet" type="text/css"
        href="https://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
  <style type="text/css">
   .example .visible {border: thin dotted silver}

    /* delete this block when you've cleared out all the .replaceme elements */
    .replaceme {
      border: solid red;
      padding: 0 0.5em;
      margin: 0 0.1em;
      background: yellow;
      color: green;
    }
    .replaceme:before {
       content: "FIXME(";
       color: black;
    }
    .replaceme:after {
       content: ")";
       color: black;
    }
  </style>
</head>

<div class="head">
<!--logo-->

<h1>CSS Grid Template Module</h1>

<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
<dl>
  <dt>This version:
    <dd><a href="[VERSION]">https://www.w3.org/TR/[YEAR]/ED-css3-grid-template-[CDATE]/</a>

  <dt>Latest version:
    <dd><a href="https://www.w3.org/TR/[SHORTNAME]/">https://www.w3.org/TR/[SHORTNAME]/</a>

  <dt>Editor's draft:
    <dd><a href="https://drafts.csswg.org/[SHORTNAME]/">https://drafts.csswg.org/[SHORTNAME]/</a>

  <dt>Previous version:
    <dd><a href="http://www.w3.org/PreviousVersionURI">
    http://www.w3.org/PreviousVersionURI</a>

  <dt>Issues List:</dt>
    <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/FIXME">http://www.w3.org/Style/CSS/Tracker/products/FIXME</a>

  <dt>Discussion:</dt>
    <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line &ldquo;<kbd>[<!---->[SHORTNAME]] <var>&hellip; message topic &hellip;</var></kbd>&rdquo;

  <dt>Editors:
    <dd class=vcard><span class=fn>[editor1 name]</span>,
      <span class=org>[affiliation (opt.)]</span>,
      <span class=email>[email address (opt.)]</span>
    <dd class=vcard><span class=fn>[editor2 name]</span>,
      <span class=org>[affiliation (opt.)]</span>,
      <span class=email>[email address (opt.)]</span>
</dl>

<!--copyright-->

<hr title="Separator for header">
</div>

<h2 class="no-num no-toc" id="abstract">Abstract</h2>

  <p>CSS is a language for describing the rendering of structured documents
  (such as HTML and XML) on screen, on paper,  in speech, etc. This module
  contains the features of CSS level&nbsp;3 relating to <var class="replaceme">DESCRIBE HERE</var>.
  It includes and extends the functionality of CSS level&nbsp;2 [[!CSS21]],
  which builds on CSS level&nbsp;1 [[CSS1]].
  The main extensions compared to level&nbsp;2 are <var class="replaceme">SUMMARIZE HERE</var>.

<h2 class="no-num no-toc" id="status">Status of this document</h2>

<!--status-->

<p>The following features are at risk: &hellip;


<p class=issue>Leave for next level or different module: chaining
regions, page templates, repeat (automatically add) columns and rows,
style fragments of elements that are in a certain slot (region-based
styling).


<h2 class="no-num no-toc" id="contents">
Table of contents</h2>

<!--toc-->



<h2 id="intro">
Introduction</h2>

  <p><em>This section is not normative.</em>
  
  <p class="issue">Merge introductory text, which right now is simply
  concatenated between Grid and Template.</p>
  
  <div class=sidefigure>
    <p><img src="diagram.png" alt="Image: four elements move to four slots
    in a template" longdesc="diagram.desc">
    
    <p class=caption>Four slots, called a, b, c and d, each receive a
    part of a document
  </div>

  <p class=mtb>The styling of a Web page, a form or a graphical user
  interface can roughly be divided in two parts: (1) defining the
  overall “grid” of the page or window and (2) specifying the fonts,
  indents, colors, etc., of the text and other objects. The two are not
  completely separate, of course, because indenting or coloring a text
  influences the perceived grid as well. Nevertheless, when one
  separates the parts of a style that should change when the window gets
  bigger from the parts that stay the same, one often finds that the
  grid changes (room for a sidebar, extra navigation bar, big margins,
  larger images…), while fonts, colors, indents, numbering styles, and
  many other things don't have to change, until the size of the window
  becomes extreme.
  
  <p>The properties in this specification work by associating a
  <i>layout grid</i> with an element. Rather than letting an element
  lay out its descendants in their normal order as inline text or as
  blocks of text (the policies available in CSS level&nbsp;1), the
  policy defined in this module gives an element an invisible grid for
  aligning selected descendant elements.
  
  <p>Because layouts on the Web have to adapt to different window and
  paper sizes, the rows and columns of the grid can be made fixed or
  flexible in size.
  
  <p>The typical use cases for these properties include:
  
  <ul>
    <li>Complex Web pages, with multiple navigation bars in fixed
    positions, areas for advertisements, etc.
  
    <li>Complex forms, where the alignment of labels and form fields may
    be easier with the properties of this module than with the
    properties for tables and margins.
  
    <li>GUIs, where buttons, toolbars, labels, icons, etc., are aligned
    in complex ways and have to stay aligned (and not wrap, for example)
    when the window is resized.
  </ul>

  <p>Grid-based positioning is an alternative to absolute positioning,
  which, like absolute positioning, is especially useful for aligning
  elements that don't have simple relationships in the source
  (parent-child, ancestor-descendant, immediate sibling). But in
  contrast to absolute positioning, the elements are not positioned with
  the help of horizontal and vertical coordinates, but by mapping them
  into slots in a table-like template. The relative size and alignment
  of elements is thus governed implicitly by the rows and columns of the
  template.

  <p>The mapping is done with the 'position' property, which specifies
  in this case into which slot of the template the element goes. The
  template itself is specified on the 'grid-template' property of some
  ancestor of the elements to remap.
  
  <div class=example>
    <p>In this example, the four children of an element are assigned to
    four slots (called a, b, c and d) in a 2×2 template. (All mark-up
    examples in this specification are HTML fragments, unless otherwise
    stated.)
    
    <div class=sidefigure>
      <p><img src="aapje.png" alt="Image: sample rendering" longdesc="aapje.desc">
      <p class=caption>Each element occupies one slot. In this template,
      all slots have the same size.
    </div>
  
    <pre>
<!-- -->&lt;style type="text/css"&gt;
<!-- -->  dl { grid: "ab"
<!-- -->             "cd" }
<!-- -->  #sym1 { position: slot(a) }
<!-- -->  #lab1 { position: slot(b) }
<!-- -->  #sym2 { position: slot(c) }
<!-- -->  #lab2 { position: slot(d) }
<!-- -->&lt;/style&gt;
<!-- -->&lt;dl&gt;
<!-- -->  &lt;dt id=sym1&gt;A
<!-- -->  &lt;dd id=lab1&gt;A is een aapje
<!-- -->  &lt;dt id=sym2&gt;B
<!-- -->  &lt;dd id=lab2&gt;B is de bakker
<!-- -->&lt;/dl&gt;
    </pre>
  </div>

  <div class=example>
    <p>Templates can also help with device-independence. This example uses
    Media Queries [[MEDIAQ]] to change the overall layout of a page from
    3-column layout for a wide screen to a 1-column layout for a narrow
    screen. It assumes the page has been marked-up with logical sections
    with IDs.
  
    <pre>
<!-- -->@media all
<!-- -->{
<!-- -->  body { grid: "aaa"
<!-- -->               "bcd" }
<!-- -->  #head { position: slot(a) }
<!-- -->  #nav  { position: slot(b) }
<!-- -->  #adv  { position: slot(c) }
<!-- -->  #body { position: slot(d) }
<!-- -->}
<!-- -->@media all and (max-width: 500px)
<!-- -->{
<!-- -->  body { grid: "a"
<!-- -->               "b"
<!-- -->               "c" }
<!-- -->  #head { position: slot(a) }
<!-- -->  #nav  { position: slot(b) }
<!-- -->  #adv  { display: none }
<!-- -->  #body { position: slot(c) }
<!-- -->}</pre>
  </div>

  <div class=example>
    <p>Elements can be positioned this way, but not made to overlap,
    unless with negative margins. Here is how the <a
    href="http://www.csszengarden.com/?cssfile=/026/026.css&amp;page=0">
    “zunflower” design</a> of the Zen Garden could be done:
    
    <pre>
<!-- -->#container { grid: "abc" }
<!-- -->#intro { position: (a); margin-right: -2em; box-shadow: 0.5em 0.5em 0.5em }
<!-- -->#supportingText { position: slot(b); box-shadow: 0.5em 0.5em 0.5em }
<!-- -->#linkList { position: slot(c) }</pre>
  </div>

  <div class=example>
    <p>Template-based positioning borrows some concepts from table layout,
    in particular the idea of aligning elements in rows and columns, so
    that they constrain each other's size. But there are also differences. 
    This example shows some of them. Assume this document fragment:
  
    <pre>
<!-- -->&lt;div class=group>
<!-- --> &lt;div>aa aa aa aa aa aa&lt;/div>
<!-- --> &lt;div>bbb&lt;/div>
<!-- --> &lt;div class=menu>ccccc&lt;/div>
<!-- -->&lt;/div></pre>
    
    <p>We can lay it out as three columns, as the following illustrations
    show. The style sheet would contain the following.
    
    <pre>
<!-- -->.group {display: table}
<!-- -->.group > div {display: table-cell}
    </pre>
    
    <div class=figure>
      <p><img src="table1.png" alt="[Three unequal cells]" longdesc="table1.desc">
      <p class=caption>Example of rendering with a table.
    </div>

    <p>We can also use a template, in which case the style sheet would
    contain this:
    
    <pre>
<!-- -->.group {grid: "abc"}
<!-- -->.group > div {position: slot(a)}
<!-- -->.group > div + div {position: slot(b)}
<!-- -->.group > div + div + div {position: slot(c)}
    </pre>

    <p>By default, the table is as wide as needed to fit its contents. To
    make sure it is as wide as its containing block, we need to add
    
    <pre>.group {display: table; width: 100%}</pre>

    <p>That is not needed for the template, but, on the other hand, if we
    want the template to fit its contents, we would need to say so:
    
    <pre>.group {grid: "abc"; width: fit-content}</pre>
    
    <p>(See [[!CSS3BOX]] for the definition of the 'width' property.) The
    columns of the template are by default all the same size. The columns
    of the table satisfy certain constraints, but the exact size is not
    defined. We can make them all the same by adding a rule (see
    [[!CSS3TBL]]):
    
    <pre>.group {display: table; width: 100%; table-layout: fixed}</pre>

    <div class=figure>
      <p><img src="table2.png" alt="[Three equal cells]" longdesc="table2.desc">
      <p class=caption>Example of rendering with equal columns.
    </div>
    
    <p>In both styles, we can set a column to a certain size:
    
    <pre>div.menu {width: 3em}</pre>
    
    <p>resp.,
    
    <pre>.group {grid: "abc" * * 3em}</pre>
    
    <div class=figure>
      <p><img src="table3.png" alt="[Two equal cells, third is 3em wide]"
      longdesc="table3.desc">
    
      <p class=caption>Example of rendering with a fixed third column and
      the other two columns of equal width.
    </div>
  
    <p>If there is an unknown number of columns (children of the div.group
    element), the style sheet for the table model will automatically take
    them into account. The style sheet for the template model, however,
    creates a template of exactly three columns and can't handle tables
    with an unknown number of columns. The extra elements will be added
    into the default slot (in this case the ''a'' slot).
    
    <p>In both models, elements can have borders, but only in the table
    model can borders be collapsed, which makes setting borders a little
    easier in the table model:
  
    <pre>
<!-- -->.group {display: table; border-collapse: collapse}
<!-- -->.group > div {border: solid}</pre>

    <p>resp.,
  
    <pre>
<!-- -->.group > div {border: solid; border-left: none}
<!-- -->.group > div:first-child {border-left: solid}
    </pre>
    
    <p>In the template model, the order of the elements is explicit, and
    thus it is possible to reverse the order of the columns:
    
    <pre>
<!-- -->.group > div {position: slot(c)}
<!-- -->.group > div + div {position: slot(b)}
<!-- -->.group > div + div + div {position: slot(a)}
    </pre>
  
    <div class=figure>
      <p><img src="table4.png" alt="[Different contents for the cells]"
      longdesc="table4.desc">
    
      <p class=caption>Example of rendering with the contents of the three
      columns reversed: the third element is shown in the first slot and
      the first element in the third slot.
    </div>
    
    <p>In the table model, the order of the rows and columns is given by
    the document source and thus can't be changed.
  </div>

  <div class=example>
    <p>This example shows a way to move notes to the end of a section. 
    “Notes” in this example refers to elements in HTML with a class of 
    “note”. A fragment of HTML such as
    <pre>
<!-- -->&lt;div class=section>
<!-- -->  &lt;p>The balubious coster of the fifth secter&lt;span
<!-- -->    class=note> The sixth secter coster is a difter
<!-- -->    manon.&lt;/span> of The Rollow Carpug mentizes a costernica.
<!-- -->  &lt;p>&hellip;
<!-- -->&lt;/div></pre>
    <p>with this style sheet
    <pre>
<!-- -->div.section {
<!-- -->    grid: "*" available
<!-- -->          "F" available}
<!-- -->.note {
<!-- -->    position: slot(F);
<!-- -->    content: counter(note) ".\A0" contents;
<!-- -->    counter-increment: note;
<!-- -->    font-size: smaller}
<!-- -->.note::before {
<!-- -->    content: counter(note);
<!-- -->    position: slot(*);
<!-- -->    vertical-align: super;
<!-- -->    font-size: larger}</pre>
    <p>results in a rendering similar to this:
    <div class=figure>
      <p><img src="footnotes.png" alt="Same text, with the SPAN replaced by
      “(1)” and its content moved to the end." longdesc="footnotes.desc">
      <p class=caption>Rendering of a text with footnotes.
    </div>
  </div>

<h3 id="grid-intro">
Introduction to Grids</h3>
    
<h3 id="background">
Background</h3>
            
  <div class="sidefigure">
    <img class="figure" alt="FIXME" src="images/basic-form.png" />
    <p class="caption">Application layout example requiring horizontal
    and vertical alignment.</p>
  </div>

  <p>As websites evolved from simple documents into complex, interactive
  applications, tools for document layout, e.g. floats, were not necessarily
  well suited for application layout. By using a combination of tables,
  JavaScript, or careful measurements on floated elements, authors discovered
  workarounds to achieve desired layouts.  Layouts that adapted to the
  available space were often brittle and resulted in counter-intuitive
  behavior as space became constrained. As an alternative, authors of many
  web applications opted for a fixed layout that cannot take advantage of
  changes in the available rendering space on a screen.
      
  <p>The layout capabilities of the Grid address these problems. The Grid
  provides a mechanism for authors to divide available space for layout
  into columns and rows using a set of predictable sizing behaviors.
  Authors can then precisely position and size the building block elements
  of their application by referencing the <a href="#grid-line">Grid Line</a>s 
  between the columns and rows, or by defining and referencing a
  <a href="#grid-cell">Grid Slot</a>, which is a rectangular space covering
  an intersection of columns and rows.  Figure 1 illustrates a basic layout
  which can be achieved with the Grid.

        
<h3 id="space-adapt">Adapting Layouts to Available Space</h3>
  <div class="sidefigure">
    <p><img alt="FIXME" src="images/game-smaller.png" />
    <p class="caption">Five grid items arranged according to content size
    and available space.</p>
  </div>
  <div class="sidefigure">
    <p><img alt="FIXME" src="images/game-larger.png" />
    <p class="caption">Growth in the grid due to an increase in available
    space.</p>
  </div>

  <p>The <i>grid element</i> can be used to intelligently
  reflow elements within a webpage. Figure 2 represents a game with five major
  areas in the layout: the game title, stats area, game board, score area,
  and control area. The author's intent is to divide the space for the game
  such that:
  <ul>
    <li>The stats area always appears immediately under the game title.</li>
    <li>The game board appears to the right of the stats and title.</li>
    <li>The top of the game title and the game board should always align.</li>
    <li>The bottom of the game board and the stats area align when the game has reached its minimum height, 
        but otherwise the game board will stretch to take advantage of all the screen real-estate available to it.
    </li>
    <li>The score area should align into the column created by the game and stats area, while the controls are centered under the board.</li>
  </ul> 
  
  <p>As an alternative to using script to control the absolute position,
  width, and height of all elements, the author can use the
  <i>grid element</i>, as shown in Figure 3.
  The following example shows how an author might achieve all the sizing,
  placement, and alignment rules declaratively.

  <p>Note that there are multiple ways to specify the structure of the
  <a href="#grid-element">Grid</a> and to position and size
  <i>grid items</i>, each optimized for different scenarios.
  This example illustrates one that an author may use to define the position
  and space for each <i>grid item</i> using the
  'grid-rows' and 'grid-columns' properties of the
  <i>grid element</i>, 
  and the 'grid-row' and 'grid-column' properties on each
  <i>grid item</i>.
  </p>
  
  <pre class="example">&lt;style type="text/css"&gt;
    #grid { 
        display: grid;

        /* Two columns: the first sized to content, the second receives the remaining space,   */
        /* but is never smaller than the minimum size of the board or the game controls, which */
        /* occupy this column. */
        grid-columns: auto minmax(min-content, 1fr);

        /* Three rows: the first and last sized to content, the middle row receives the remaining */
        /* space, but is never smaller than the minimum height of the board or stats areas.       */
        grid-rows: auto minmax(min-content, 1fr) auto
    }

    /* Each part of the game is positioned between grid lines by referencing the starting grid line and */
    /* then specifying, if more than one, the number of rows or columns spanned to determine the ending */
    /* grid line, which establishes bounds for the part. */
    #title    { grid-column: 1; grid-row: 1 }
    #score    { grid-column: 1; grid-row: 3 }
    #stats    { grid-column: 1; grid-row: 2; grid-row-align: start }
    #board    { grid-column: 2; grid-row: 1; grid-row-span: 2 }
    #controls { grid-column: 2; grid-row: 3; grid-column-align: center }
&lt;/style&gt;

&lt;div id="grid"&gt;
    &lt;div id="title"&gt;Game Title&lt;/div&gt;
    &lt;div id="score"&gt;Score&lt;/div&gt;
    &lt;div id="stats"&gt;Stats&lt;/div&gt;
    &lt;div id="board"&gt;Board&lt;/div&gt;
    &lt;div id="controls"&gt;Controls&lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="source-independence">
Source Independence</h3>

  <div class="sidefigure">
    <p><img alt="FIXME" src="images/game-portrait.png" />
    <p class="caption">An arrangement suitable for "portrait" orientation.</p>
  </div>
  <div class="sidefigure">
      <p><img alt="FIXME" src="images/game-landscape.png" />
      <p class="caption">An arrangement suitable for "landscape" orientation.</p>
  </div>
  
  <p>Continuing the prior example, the author also wants the game to adapt
  to the space available on traditional computer monitors, handheld devices, 
  or tablet computers. Also, the game should optimize the placement of the
  components when viewed either in landscape or portrait orientation 
  (Figures 4 and 5). By combining the CSS markup for the
  <i>grid element</i> with
  <a href="https://www.w3.org/TR/css3-mediaqueries/">media queries</a>
  [[MEDIAQ]], the author is able to use the same semantic markup, but
  rearranged independent of its source order, to achieve the desired layout
  in both orientations.

  <p>The following example leverages the <a href="#grid-element">Grid</a>'s
  ability to name the space which will be occupied by a
  <i>grid item</i>.  This allows the author to avoid
  rewriting rules for <i>grid items</i> as the
  <a href="#grid-element">Grid</a>'s definition changes.

  <pre class="example">&lt;style type="text/css"&gt;
    @media (orientation: portrait) {
        #grid { 
            display: grid;
            
            /* The rows, columns and cells of the grid are defined visually using the grid-template property.        */
            /* Each string is a row, and each letter a cell.  The max number of letters in any one string determines */
            /* the number of columns. */
            grid-template: "ta"
                           "sa"
                           "bb"
                           "cc";
            
            /* Columns and rows created with the template property can be assigned a sizing function with the */
            /* grid-columns and grid-rows properties. */
            grid-columns: auto minmax(min-content, 1fr); 
            grid-rows: auto auto minmax(min-content, 1fr) auto
        }
    }

    @media (orientation: landscape) {
        #grid { 
            display: grid;
            
            /* Again the template property defines cells of the same name, but this time positioned differently */
            /* to better suit a landscape orientation. */
            grid-template: "tb"
                           "ab"
                           "sc";
            
            grid-columns: auto minmax(min-content, 1fr); 
            grid-rows: auto minmax(min-content, 1fr) auto
        }
    }

    /* The grid-cell property places a grid item into named region (cell) of the grid. */
    #title    { grid-cell: "t" }
    #score    { grid-cell: "s" }
    #stats    { grid-cell: "a" }
    #board    { grid-cell: "b" }
    #controls { grid-cell: "c" }
&lt;/style&gt;

&lt;div id="grid"&gt;
    &lt;div id="title"&gt;Game Title&lt;/div&gt;
    &lt;div id="score"&gt;Score&lt;/div&gt;
    &lt;div id="stats"&gt;Stats&lt;/div&gt;
    &lt;div id="board"&gt;Board&lt;/div&gt;
    &lt;div id="controls"&gt;Controls&lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id=accessibility>
A note on the accessibility of content reordering</h3>
  
  <p><em>(This section is not normative.)</em>
  
  <p>The facilities in this specification allow elements from a document
  to be displayed in a visual order that is to a large extent
  independent of the order in the document. That may have both positive
  and negative effects on accessibility. The positive aspect is that it
  allows the content in the document to be kept in logical order, so
  that the document is as functional as possible without the style sheet
  and on media where the style sheet doesn't apply. A negative aspect is
  that a document that has a defined tab order (the order in which
  elements get the focus when the tab-key is pressed) will show on the
  screen with a tab order unrelated to the visual order. It may be
  necessary to use the keyboard control features of the CSS Basic User
  Interface module [[CSS3UI]] to ensure that the tab navigation follows
  the visual order, or to refrain from positioning semantically related
  elements in different parts of a template.
  
  <p>The following two requirements from the Web Content Accessibility
  Guidelines (WCAG) 2.0 [[WCAG20]] are particularly relevant. See that
  specification for more information.

  <blockquote>
    <p><a
    href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-sequence"
    ><strong>1.3.2 Meaningful Sequence:</strong></a> When the sequence in
    which content is presented affects its meaning, a <a
    href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#correct-reading-sequencedef"
    >correct reading sequence</a> can be <a
    href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#programmaticallydetermineddef
    ">programmatically determined.</a> (Level A)
  </blockquote>
  
  <blockquote>
    <p><a
    href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-order"
    ><strong>2.4.3 Focus Order:</strong></a> If a <a
    href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#webpagedef" >Web
    page</a> can be <a
    href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#nav-seqdef"
    >navigated sequentially</a> and the navigation sequences affect
    meaning or operation, focusable components receive focus in an order
    that preserves meaning and operability. (Level A)
  </blockquote>

<h3 id="intro-layering">
Grid Layering of Elements</h3>

  <div class="sidefigure">
    <p><img alt="FIXME" src="images/control-layering-and-alignment.png" />
    <p class="caption">A control composed of layered HTML elements.</p>
  </div>

  <p>In the example shown in Figure 6, the author is creating a custom slider 
  control. The control has six parts. The lower and upper labels align to the
  left and right edges of the control. The track of the slider spans the area
  between the labels. The lower and upper fill parts touch beneath the thumb,
  and the thumb is a fixed width and height that can be moved along the track
  by updating the two fraction-sized columns.

  <p>Prior to the <i>grid element</i>, the author would
  have likely used absolute positioning to control the top and left coordinates, 
  along with the width and height of each HTML element that comprises the
  control. By leveraging the <i>grid element</i>,
  the author can instead limit script usage to handling mouse events on the
  thumb,  which snaps to various positions along the track as the
  'grid-columns' property of the <i>grid element</i> is
  updated.

  <pre class="example">&lt;style type="text/css"&gt;
    #grid { 
        display: grid;

        /* The grid-columns and rows properties also support naming grid lines which can then be used */
        /* to position grid items.  The line names are assigned on either side of a column or row     */
        /* sizing function where the line would logically exist. */
        grid-columns:      
            "start"        auto 
            "track-start"  0.5fr 
            "thumb-start"  auto 
            "fill-split"   auto 
            "thumb-end"    0.5fr 
            "track-end"    auto
            "end";
    }

    /* Grid-column and grid-row accept a starting and optional ending line.  Below the lines are referred to by name. */
    /* Beyond any semantic advantage, the names also allow the author to avoid renumbering the grid-row and column     */
    /* properties of the grid items.  This is similar to the concept demonstrated in the prior example with the        */
    /* grid-template property during orientation changes, but grid lines can also work with layered grid items that    */
    /* have overlapping cells of different shapes like the thumb and track parts in this example. */
    #lower-label { grid-column: "start" }
    #track       { grid-column: "track-start" "track-end"; grid-row-align: center }
    #upper-label { grid-column: "track-end"; }
    
    /* Fill parts are drawn above the track so set z-index to 5. */
    #lower-fill  { grid-column: "track-start" "fill-split"; grid-row-align: center; z-index: 5 }
    #upper-fill  { grid-column: "fill-split" "track-end"; grid-row-align: center; z-index: 5 }
    
    /* Thumb is the topmost part; assign it the highest z-index value. */
    #thumb       { grid-column: "thumb-start" "thumb-end"; z-index: 10 }
&lt;/style&gt;

&lt;div id="grid"&gt;
    &lt;div id="lower-label"&gt;Lower Label&lt;/div&gt;
    &lt;div id="upper-label"&gt;Upper Label&lt;/div&gt;
    &lt;div id="track"&gt;Track&lt;/div&gt;
    &lt;div id="lower-fill"&gt;Lower Fill&lt;/div&gt;
    &lt;div id="upper-fill"&gt;Upper Fill&lt;/div&gt;
    &lt;div id="thumb"&gt;Thumb&lt;/div&gt;
&lt;/div&gt;</pre>  

<h3 id="placement">
Module interactions</h3>

  <p class="replaceme">Explain, normatively, how this module affects the definition of CSS.</p>

  <p>This module replaces and extends the <var class="replaceme">SUMMARIZE HERE</var>
  features defined in [[!CSS21]] sections <var class="replaceme">W.X and Y.Z</var>.


  <p>See [[!CSS3PAGE]] for the definition of <a
  href="https://www.w3.org/TR/css3-multicol/#multi-column-element"
  ><dfn>multi-column element.</dfn></a>

  <p>[[!CSS3-WRITING-MODES]] defines the <dfn>writing-mode</dfn>
  property, which defines when elements have a <dfn>vertical writing
  mode</dfn> (text lines are vertical) or a <dfn>horizontal writing
  mode</dfn> (text lines are horizontal). For brevity, we refer to the
  former as a <dfn title="vertical|vertical element" >vertical
  element</dfn> and to the latter as a <dfn
  title="horizontal|horizontal element" >horizontal element.</dfn>

  <p>[[!CSS3BOX]] defines the intrinsic sizes of boxes.

  <p>Following [[!CSS3-WRITING-MODES]] and [[!CSS3BOX]], we define the
  <dfn>inline dimension</dfn> of a box, element or slot as meaning
  either its width or height, depending on whether it is
  <em>horizontal</em> or <em>vertical,</em> respectively. And
  likewise: the <dfn>block dimension</dfn> of a box, element or slot
  <em>at a given inline dimension</em> is its size in the
  perpendicular dimension.

  <p>'Direction' is defined in [[!CSS21]].



<h3 id="values">
Values</h3>

  <p>This specification follows the
  <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
  definition conventions</a> from [[!CSS21]]. Value types not defined in
  this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
  Other CSS modules may expand the definitions of these value types: for
  example [[CSS3COLOR]], when combined with this module, expands the
  definition of the &lt;color&gt; value type as used in this specification.</p>
  
  <p>In addition to the property-specific values listed in their definitions,
  all properties defined in this specification also accept the
  <a href="https://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
  keyword as their property value. For readability it has not been repeated
  explicitly.



<h2 id="terminology">
Core Concepts of the Grid</h2>

  <div class="sidefigure">
    <img class="figure" alt="FIXME" src="images/grid-concepts.png">
    <p class="caption">A diagram illustrating the relationship between
    the <i>grid element</i> and its Tracks, Lines,
    Cells and Items.</p>
  </div>

  <p>A <dfn id="grid-element">grid element</dfn> is declared in markup by
  setting the display property of an element to ''grid'' or ''inline-grid''.
  <!--
  Child elements of the Grid are termed <a href="#grid-item">grid items</a>
  and may be positioned and sized by the <i>grid element</i>
  by leveraging the following logical concepts:

  <ul>
      <li><a href="#grid-track">Grid Track</a>s</li>
      <li><a href="#grid-line">Grid Line</a>s</li>
      <li><a href="#slot">Slot</a>s</li>
  </ul>
  -->
  
  <p>
  Figure 7 illustrates the relationship between these concepts and the markup
  in the subsections that follow produce the result shown in the figure.
  </p>

  <p><dfn>Grid track</dfn> is the generic name in this specification
  for a row or column in a grid. Grid tracks are defined with the
  properties 'grid-rows' (to define rows) and 'grid-columns' (to
  define columns) on the <i>grid element</i>. Each track is defined by
  declaring a list of sizes, one size for each track. <!-- Tracks
  define the space between <a href="#grid-line">Grid Line</a>s. -->

  <pre class="example">&lt;style type="text/css"&gt;
#grid { 
    grid-columns: 150px 1fr; /* two columns */
    grid-rows: 50px 1fr 50px /* three rows  */
}
&lt;/style&gt;</pre>

  <p><dfn>Grid line</dfn> is the term in this specification for the
  vertical edges of columns and the horizontal edges of rows. If there
  are <var>N</var> columns, their edges are numbered from 1 (the
  leftmost edge of the first column) to <var>N</var>+1 (the rightmost
  edge of the last column. Analogously for the edges of the rows.

  <!--
  <p>The following two examples create three column <i>Grid Lines</i>
  and four row <i>Grid Lines</i>.  The first example demonstrates how
  an author would refer to the <a href="#grid-line">Grid Line</a>s
  using <a href="#grid-line">Grid Line</a> numbers.  The second example
  uses explicitly named <a href="#grid-line">Grid Line</a>s.

  <pre class="example">&lt;style type="text/css"&gt;
  #grid { 
      display: grid; 
      grid-columns: 150px 1fr;
      grid-rows: 50px 1fr 50px
  }

  #item1 { grid-column: 2; grid-row: 1 4 }
&lt;/style&gt;</pre>

  <pre class="example">&lt;style type="text/css"&gt;
  /* equivalent layout to the prior example, but using named lines */
  #grid { 
      display: grid; 
      grid-columns: 150px "item1-start" 1fr "item1-end";
      grid-rows: "item1-start" 50px 1fr 50px "item1-end"
  }

  #item1 { 
      grid-column: "item1-start" "item1-end"; 
      grid-row: "item1-start" "item1-end" 
  }
&lt;/style&gt;</pre>
  -->

  <p>A <dfn>grid cell</dfn> is the intersection of a row and a
  column. A grid with <var>N</var> columns and <var>M</var> rows has
  <var>N</var>*<var>M</var> cells.

  <!-- The term “slot” is defined under 'grid-template' -->

  <!--
  are the logical space used to lay out
  one or more <i>grid items</i>.
  <i>slots</i> can be defined explicitly using the 'grid-template'
  property, or anonymously by referencing a region of the Grid using the
  'grid-row' and 'grid-column' properties on a <i>grid item</i>.

  <p>Whether a <i>slot</i> is created explicitly or implicitly, there
  is no difference in the layout or drawing order of the
  <i>grid items</i> which are associated with that
  <i>slot</i>.
  <pre class="example">&lt;style type="text/css"&gt;
/* using the template syntax */
#grid  { 
    display: grid; 
    grid-template: "ad"
                   "bd"
                   "cd";
    grid-columns: 150px 1fr;
    grid-rows: 50px 1fr 50px
}

#item2 { position: slot(b) }
#item3 { position: slot(b) }

/* Align items 2 and 3 at different points in the slot "b".  */
/* By default, Grid Items are stretched to fit their slot    */
/* and these items would layer one over the other. */
#item2 { grid-row-align: start }
#item3 { grid-column-align: end; grid-row-align: end }&lt;/style&gt;</pre>
  -->

<h2 id=display>
Declaring a grid template</h2>

  <p>An element is a <dfn>grid element</dfn> (i.e., it defines a grid
  for its descendants) if its 'display' value is ''grid'' or ''inline-grid''.

  <p>The <dfn>grid ancestor</dfn> of an element is the nearest
  ancestor that is a grid element.

  <table class="propdef">
    <tr>
      <th>Name:
      <td><dfn>display</dfn>
    <tr>
      <th><a href="#values">Value</a>:
      <td>&hellip; | grid | inline-grid
  </table>
  
  <p>This module adds the ''grid'' and ''inline-grid'' values to the 'display'
  property [[CSS21]], as defined below:
  
  <dl>
    <dt><dfn id="value-def-display--grid">''grid''</dfn></dt>
    <dd>A value of grid causes an element to display as a block-level
    <i>grid element</i>.</dd>
  
    <dt><dfn id="value-def-display-inline-grid">''inline-grid''</dfn></dt>
    <dd>A value of inline-grid causes an element to display as an
    inline-level <i>grid element</i>.</dd>
  </dl>
  
<div class="issue">
  <p>Should grid elements be created automatically without using
  'display'? On the one hand, this (a) is not consistent with how flex
  boxes are created and (b) could create some confusing dynamics
  (e.g., setting ''display: table'' or 'display: flexbox' removes any
  grid, but setting 'display: table-cell' or 'display: list-item'
  keeps the grid); but (1) requires only one instead of two properties
  to create a grid element, (2) allows other block container elements
  (such as table cells, table captions, list items, flex
  items&hellip;) to contain a grid, without extra keywords for
  'display' ('table-cell-grid', 'list-item-grid'&hellip;), and (3) is
  consistent with how <a
  href="https://www.w3.org/TR/css3-multicol/#multi-column-element"
  >multicolumn elements</a> are created.

  <p>Proposed text:
  
  <p>An element is a <dfn>grid element</dfn> (i.e., it defines a grid
  for its descendants) if it generates a
  a <a href="https://www.w3.org/TR/CSS21/visuren.html#block-boxes" >block
  container box</a> [[!CSS21]] and one or more of the following is true:
  
  <ul>
  <li>The element's 'grid-template' is not ''none''.
  <li>The element's 'grid-rows' is not ''auto''.
  <li>The element's 'grid-columns' is not ''auto''.
  </ul>
  
  <p>These properties are defined below.
</div>

  <p class=note>Block containers are, informally, elements that can have
  block elements as children, such as blocks, inline blocks or table
  cells, but not inline elements or replaced elements.
  
  <p>The <dfn>number of columns</dfn> of a <span>grid element</span>
  is defined as follows:

  <ol>
    <li>If 'grid-template' is not 'none', it determines the number of
    columns.

    <li>Otherwise, if 'grid-columns' is not 'auto', the number of
    columns is equal to the number of <var>&lt;track-size&gt;</var>
    values in 'grid-columns'.

    <li>Otherwise, the grid has one column.
  </ol>

  <p>The <dfn>number of rows</dfn> of a <span>grid element</span> is
  defined as follows:

  <ol>
    <li>If 'grid-template' is not 'none', it determines the number of
    rows.

    <li>Otherwise, if 'grid-rows' is not 'auto', the number of rows is
    equal to the number of <var>&lt;track-size&gt;</var> values in
    'grid-rows'.

    <li>Otherwise, the grid has one row.
  </ol>

  <div class=issue>
  <p>Alternative definition:

  <p>The number of columns is the number of
  <var>&lt;track-size&gt;</var> values in 'grid-columns' or the number
  of columns in 'grid-template', whichever is larger. (A value of
  ''none'' in this case means zero columns.)

  <p>The number of rows is the number of <var>&lt;track-size&gt;</var>
  values in 'grid-rows' or the number of rows in 'grid-template',
  whichever is larger.  (A value of ''none'' in this case means zero
  rows.)
  </div>

  <p class=issue>What if an element has both 'columns' and
  'grid-template', is it a grid element or a column element? (or do the
  columns apply to the default slot?)
  
  <p class=issue>Use 'fr' unit (as in css3-grid-align) instead of '*' (as
  in css3-layout).


<h3 id="grid-lines-tracks">
Grid Lines and Tracks</h3>

  <div class="sidefigure">
      <img class="figure" alt="Image: Grid Lines." src="images/grid-lines.png">
      <p class="caption">Grid Lines.</p>
  </div>

  <p><i>grid element</i>s use
  <a href="#grid-line">Grid Line</a>s to divide their space.
  There are two sets of <a href="#grid-line">Grid Line</a>s: one set
  defined by the columns parallel to the
  <a href="https://www.w3.org/TR/css3-writing-modes/#block-flow-dimensions">block flow dimension</a>,
  and another orthogonal set defined by rows in the
  <a href="https://www.w3.org/TR/css3-writing-modes/#inline-dimension">inline dimension</a>.
  
  <p>A <a href="#grid-track">Grid Track</a> is a generic term for the column or
  row between two <a href="#grid-line">Grid Line</a>s.  Each
  <a href="#grid-track">Grid Track</a> is assigned a sizing function, which
  controls how wide or tall the column or row may grow, and thus how far
  apart two <a href="#grid-line">Grid Line</a>s are. The sizing function
  specified can be a length, a percentage of the
  <i>grid element</i>'s size, derived from the contents
  occupying the column or row, or a proportion of the space which remains in
  the <i>grid element</i>. In the last case, remaining
  space refers to the width or height of the
  <i>grid element</i> after accounting for space already
  consumed by columns and rows sized with a length, percentage or content.
  The size can also be specified as a range using a minmax function, which
  can combine any of the previously mentioned mechanisms to define a min and
  max size for the column or row.

  <div class="example">
    <p>In the following example there are two columns and three rows.  The first column is 150px wide beginning from the starting edge of the <i>grid element</i>'s content box.  The second column uses fractional sizing, which is a function of the remaining space in the Grid.  Its size will vary as the width of the <i>grid element</i> changes.  If the used width of the <i>grid element</i> is 200px, then the second column 50px wide.  If the used width of the <i>grid element</i> is 100px, then the second column is 0px and any content positioned in the column will be overflowing the <i>grid element</i>.  Sizing occurs in a similar fashion for the rows.
    <pre>&lt;style type="text/css"&gt;
<!-- -->  #grid { 
<!-- -->    display: grid; 
<!-- -->    grid-columns: 150px 1fr;
<!-- -->    grid-rows: 50px 1fr 50px
<!-- -->  }
<!-- -->&lt;/style&gt;</pre>
  </div>


<h3 id="grid-templates">
Declaring a template: 'grid-template'</h3>

  <p>The 'grid-template' property implicitly assigns a grid to an element
  and defines named slots in the grid. It can also designate a slot as the
  <em>default slot,</em> for unpositioned content.

  <table class=propdef>
    <tr>
      <th>Name:
      <td><dfn>grid-template</dfn>
    <tr>
      <th><a href="#values">Value</a>:
      <td>none | <var>&lt;string&gt;</var>+
    <tr>
      <th>Initial:
      <td>none
    <tr>
      <th>Applies to:
      <td><a
      href="https://www.w3.org/TR/CSS21/visuren.html#block-boxes"
      >block container elements</a> [[!CSS21]]
    <tr>
      <th>Inherited:
      <td>no
    <tr>
      <th>Animatable:
      <td>no
    <tr>
      <th>Percentages:
      <td>N/A
    <tr>
      <th>Computed&nbsp;value:
      <td>specified value
    <tr>
      <th>Canonical order:
      <td><abbr title="follows order of property value definition">per
    grammar</abbr>
  </table>

  <p>Each string consist of one or more asterisks (“*”), letters,
  periods (“.”), spaces and tabs. Each string represents one row in the
  template, each symbol other than a space or tab represents one
  column in that row. Spaces and tabs have no meaning. They may be added
  for readability.
  
  <p>The symbols in the template have the following meaning
  <dl>
    <dt>&lt;letter&gt;
      <dd>Named slot for content
    <dt>''*'' (asterisk)
      <dd>Default slot for content (explained below).
    <dt>. (period)
      <dd>Blank space.
  </dl>
  
  <p>Multiple identical letters in adjacent rows or columns form a
  single <dfn>slot</dfn> that spans those rows and columns. Ditto for
  multiple “*”s. Slot names are case-sensitive, so uppercase and
  lowercase letters are considered to be different letters.
  
  <p>Non-rectangular slots and multiple slots with the same
  letter are illegal. A template without any letter or
  “*” is illegal. A template with more than one “*” slot is illegal. 
  These errors cause the declaration to be ignored.
  
  <p class=note>Note: non-rectangular and disconnected regions
  may be permitted in a future update of CSS.
  
  <p>Rows with fewer columns than other rows are implicitly padded with
  periods (“.”).
  
  <p>Each slot (letter or “*”) acts as a block element for its
  contents.
  
  <p>If the value is ''none'', then no explicit slots are defined. If
  the element is a <em>grid element,</em> then the element instead has
  an <dfn>implicit template</dfn> consisting of a single, anonymous
  slot. I.e., for a grid element with <var>N</var> columns and
  <var>M</var> rows, the implicit template is equivalent to
  <var>M</var> strings of <var>N</var> asterisks:

  <blockquote>
   <p><code>"***</code>&hellip;<code>***"</code><br>
   <code>"***</code>&hellip;<code>***"</code><br>
   &#8942;<br>
   <code>"***</code>&hellip;<code>***"</code>
  </blockquote>

  <p class=note>Note that an element is a grid element in this case if
  'grid-columns' and 'grid-rows' are not both ''auto''.

  <p class=issue>Are grid templates logically oriented (relative to
  writing mode), or absolutely-oriented?


  
<h3 id=grid-column-sizes>
Specifying the widths of columns: 'grid-columns'</h3>

  <p>The 'grid-columns' property specifies the sizes of the columns of a
  grid.
  
  <table class=propdef>
    <tr>
      <th>Name:
      <td><dfn>grid-columns</dfn>
    <tr>
      <th><a href="#values">Value</a>:
      <td>auto | <var>&lt;track-size&gt;</var>+
    <tr>
      <th>Initial:
      <td>auto
    <tr>
      <th>Applies to:
      <td><a
      href="https://www.w3.org/TR/CSS21/visuren.html#block-boxes"
      >block container elements</a> [[!CSS21]]
    <tr>
      <th>Inherited:
      <td>no
    <tr>
      <th>Animatable:
      <td>yes, between grids with the same number of tracks
    <tr>
      <th>Percentages:
      <td>N/A
    <tr>
      <th>Computed&nbsp;value:
      <td>specified value
    <tr>
      <th>Canonical order:
      <td><abbr title="follows order of property value definition">per grammar</abbr>
  </table>
  
  <p>Where
  
  <pre class=prod>
<!-- --><dfn>&lt;track-size&gt;</dfn> = <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | * | <var>&lt;fraction&gt;</var> |
<!-- -->  <var>&lt;minmax&gt;</var> | min-content | max-content | fit-content
<!-- --><dfn>&lt;minmax&gt;</dfn> = minmax( <var>&lt;track-size&gt;</var> , <var>&lt;track-size&gt;</var> )
  </pre>

  <p>Each <var>&lt;track-size&gt;</var> sets the width of a column.

  <p>If an element has <span title="number of columns"><var>N</var>
  columns,</span> only the first <var>N</var>
  <var>&lt;track-size&gt;</var> values are used, the others are
  ignored. If there are fewer than <var>N</var> values, or if the
  value is 'auto', the missing ones are all '*' <span class=issue>[or
  '1fr']</span>.

  <p>Each <var>&lt;track-size&gt;</var> can be one of the following:

  <dl>
    <dt><var>&lt;length&gt;</var>
    <dd>
      An explicit width for that column. Negative values are illegal.
  
    <dt><var>&lt;fraction&gt;</var>
    <dd>
      (A non-negative number followed by 'fr'.) A fraction of the
      remaining space, see <a href="#fraction-values-fr" >Fraction
      values</a> below.
  
    <dt>''*'' (asterisk)
    <dd>
      All columns with a width of '*' have the same width.
  
    <dt><var>&lt;percentage&gt;</var>
    <dd>
      Expresses a size as a percentage of the a-priori
      width. <span class=issue>When the width of the <span>grid
      element</span> is dependent on content, the result is
      undefined.</span>
  
    <dt>''max-content''
    <dt>''min-content''
    <dd>
      The column's width is determined by its contents. See the
      <a href="#colwidth">algorithm</a> below.
  
    <dt>''minmax(<var>p</var>,<var>q</var>)''
    <dd>
      The column's width is constrained to be greater than or equal
      to <var>p</var> and less than or equal to <var>q</var>. <var>p</var>
      and <var>q</var> stand for [ <var>&lt;length&gt;</var> | max-content
      | min-content | * ]. There may be white space around the <var>p</var>
      and <var>q</var>. If <var>q</var> &lt; <var>p</var>,
      then <var>q</var> is ignored and
      ''minmax(<var>p</var>,<var>q</var>)'' is treated as
      'minmax(<var>p</var>,<var>p</var>)'.
  
    <dt>''fit-content''
    <dd>
      Equivalent to 'minmax(min-content, max-content)'.
      <p class="issue">''fit-content'' is normally equivalent to
      max(min-content, max(max-content, fill-available)). This
      definition doesn't quite make sense here, but should the
      keyword be the same then? maybe ''auto''?
  </dl>

  <div class=issue>
    Which is easier, '1fr' or '*'? Or do we need both?
    <pre>
<!-- -->grid-template: "a . c";
<!-- -->grid-columns: 1fr 1em 3fr;</pre>
    or
    <pre>
<!-- -->grid-template: "a . c c c";
<!-- -->grid-columns: * 1em * * *;</pre>
  </div>

  <p class=issue>Do we need percentages? It seems in practice a fraction
  of the remaining space is all that is necessary.

  <p class=issue>Flex?

  <div class="example">
    <p>The following example:</p>
    <ul>
        <li>Adds one <a href="#grid-line">Grid Line</a> 100 pixels from the 'start' of the grid.</li>
        <li>Adds another <a href="#grid-line">Grid Line</a> 1/2 of the remaining space away.</li>
        <li>Adds another <a href="#grid-line">Grid Line</a> whose distance from the prior <a href="#grid-line">Grid Line</a> will be based on the maximum content size of elements 
            occupying the column.</li>
        <li>Adds another <a href="#grid-line">Grid Line</a> whose distance from the prior <a href="#grid-line">Grid Line</a> is based on 
            the minimum content size of all elements occupying the column, or 1/2 the 
            remaining space, whichever is greater.</li>
    </ul>
    <pre>div { grid-columns: 100px 1fr max-content minmax(min-content, 1fr) }</pre>
  </div>

  <div class="example">
    <p>Additional examples of valid <a href="#grid-track">Grid Track</a> definitions:</p>
    <pre>/* examples of valid track definitions */
<!-- -->grid-rows: 1fr minmax(min-content, 1fr);
<!-- -->grid-rows: 10px (1fr auto minmax(30%, 1fr))[2];
<!-- -->grid-rows: (10px);
<!-- -->grid-rows: calc(4em - 5px)</pre>
  </div>
 

<h3 id="grid-row-sizes">
Specifying the height of rows: 'grid-rows'</h3>

  <table class=propdef>
    <tr>
      <th>Name:
      <td><dfn>grid-rows</dfn>
    <tr>
      <th><a href="#values">Value</a>:
      <td>auto | <var>&lt;track-size&gt;</var>+
    <tr>
      <th>Initial:
      <td>auto
    <tr>
      <th>Applies to:
      <td><a
      href="https://www.w3.org/TR/CSS21/visuren.html#block-boxes"
      >block container elements</a> [[!CSS21]]
    <tr>
      <th>Inherited:
      <td>no
    <tr>
      <th>Animatable:
      <td>yes, between grids with the same number of tracks
    <tr>
      <th>Percentages:
      <td>N/A
    <tr>
      <th>Computed&nbsp;value:
      <td>specified value
    <tr>
      <th>Canonical order:
      <td><abbr title="follows order of property value definition">per grammar</abbr>
  </table>

  <p>The 'grid-rows' property specifies the sizes of the rows of a grid. It
  takes the same values as 'grid-columns'.

  <p>If an element has <span title="number of rows"><var>N</var>
  rows,</span> only the first <var>N</var>
  <var>&lt;track-size&gt;</var> values are used, the others are
  ignored. If there are fewer than <var>N</var> values, or if the
  value is 'auto', the missing ones are all 'fit-content'.



<h3 id="grid-shorthand">
The 'grid' shorthand property</h3>

  <p>The 'grid' property is a shorthand for 'grid-template',
  'grid-columns' and 'grid-rows'.

  <table class=propdef>
    <tr>
      <th>Name:
      <td><dfn>grid</dfn>
    <tr>
      <th><a href="#values">Value</a>:
      <td>none | [ [ <var>&lt;string&gt;</var> [ /
       <var>&lt;row-height&gt;</var> ]? ]+ ]
       <var>&lt;col-width&gt;</var>*
    <tr>
      <th>Initial:
      <td>none
    <tr>
      <th>Applies to:
      <td><a
      href="https://www.w3.org/TR/CSS21/visuren.html#block-boxes"
      >block container elements</a> [[!CSS21]]
    <tr>
      <th>Inherited:
      <td>no
    <tr>
      <th>Animatable:
      <td>see individual properties
    <tr>
      <th>Percentages:
      <td>see individual properties
    <tr>
      <th>Computed&nbsp;value:
      <td>see individual properties
    <tr>
      <th>Canonical order:
      <td>N/A
  </table>

  <p>The 'grid' property is a shorthand for 'grid-template',
  'grid-rows' and 'grid-columns'. The value of 'grid-template' is the
  list of <var>&lt;string&gt;</var> values. The value of 'grid-rows'
  is the list of <var>&lt;row-height&gt;</var> values, with any
  omitted ones set to 'fit-content'. And the value of 'grid-columns'
  is the list of <var>&lt;col-width&gt;</var> values, or 'auto' if
  there are none.

  <div class=example>
  <p>For example, the rule

  <pre>grid: "a b c" "a b d"/4em * 10em</pre>

  <p>is the same as

  <pre>
grid-template: "a b c" "a b d";
grid-rows: fit-content 4em;
grid-columns: * 10em;</pre>

  <p>Note the ''fit-content'' keyword that was implied in the
  shorthand, but must be made explicit in the 'grid-rows' property.
  </div>

  <p class=note>Note that it is not possible in the short hand to
  specify more row heights than here are rows, unlike in the
  'grid-rows' property, where any number of extra (but ignored), row
  heights can be added at the end.



<h3>Default slots</h3>

  <p>Every <span>grid element</span> has a <dfn>default slot.</dfn> If
  there is an asterisk (“*”) in the template, then that slot is the
  default. If there is no asterisk, then the first letter in the
  template defines the default slot.

  <div class=example>
  <p>For example, if the template is defined by
  'grid-template: "..." "..c" "abb" "abb"', then “c” is the default
  slot.
  </div>

  <p>If the grid has an <em>implicit template</em> (i.e.,
  'grid-template' is ''none''), then the default slot is the single,
  anonymous slot of that implicit template.

  <p>All content of a grid element that is not inside another flow
  (e.g., because it is inside a float, absolutely positioned, or
  positioned in a different slot with '[grid-]position') is positioned
  in the default flow.

  <p>In particular, any text content of the grid element itself is
  positioned in the default flow.

  <div class=example>
  <p>For example, in this document fragment

  <pre>
&lt;DIV STYLE="grid: 'ab*'">
 &lt;IMG STYLE="flow: a" SRC="image.png" ALT="Foo">
 This is an
 &lt;EM STYLE="flow: *">emphasized&lt;/EM>
 &lt;EM STYLE="flow: b">(note well!)&lt;/EM>
 sentence.
 &lt;
&lt;/DIV>
</pre>

  <p>The three slots of the grid contain:
  <dl>
  <dt>Slot a <dd>The image
  <dt>Slot b <dd>The text “(note well!)”
  <dt>Default slot <dd>The text “This is an <em>emphasized</em>
sentence.”
  </dl>
</div>


 
<h4 id="fraction-values-fr">
Fraction Values: 'fr'</h4>

  <p>Fraction values are new units applicable to the 'grid-rows' and
  'grid-columns' properties:

  <dl>
    <dt>fr</dt>
    <dd>Fraction of available space. </dd>
  </dl>
  
  <p>The distribution of fractional space occurs after all <code>&lt;length&gt;</code> 
  or content-based row and column sizes have reached their maximum. 
  The total size of the rows or columns is then subtracted from the available
  space and the remainder is  divided proportionately among the fractional rows
  and columns.

  <p>Each column or row's proportional share can be computed as the column or row's 
  <code>&lt;fraction&gt; * &lt;remaining space&gt; / &lt;sum of all fractions&gt;</code>.  
  Fractions occurring within a ''minmax()'' function are only counted in the
  sum if in the <code>max</code> position.
  Further, fractions that occur in the <var>min</var> position are treated as
  an absolute length of ''0''.

  <p>When remaining space cannot be determined because the width or height of
  the <i>grid element</i> is undefined, fraction-sized
  <a href="#grid-track">Grid Track</a>s
  are sized to their contents while retaining their respective proportions.
  In such cases the size of each fractional <a href="#grid-track">Grid Track</a>
  can be computed by determining the ''max-content'' size of each fractional
  <a href="#grid-track">Grid Track</a> and dividing that size by the respective
  fraction. The maximum value of those results is treated as the ''1fr'' value,
  which is then multiplied by each <a href="#grid-track">Grid Track</a>'s
  <code>fraction</code> to determine its final size.

<h4 id="computed-values-grid-rows-and-columns">
''getComputedStyle()'' values for 'grid-rows' and 'grid-columns'</h4>

  <p>The resolved size of all <a href="#grid-track">Grid Track</a>s as
  returned for the 'grid-rows' and 'grid-columns' properties via
  ''getComputedStyle()'' is normalized to used pixel values.
  <p>All <a href="#grid-track">Grid Track</a>s are included in the computed
  value reported for 'grid-rows' and 'grid-columns' regardless of how the
  <a href="#grid-track">Grid Track</a>s were created, e.g. implicit tracks
  may be created by <i>grid items</i> referencing a
  <a href="#grid-line">Grid Line</a> not explicitly defined by a
  'grid-rows' or grid-columns' property.



<h3 id="slot-sizes">
Calculating the size of the grid</h3>

<p>For the purpose of the calculations below, each slot (letter or
“*”) in a grid has four dimensions associated with it, called
<var>MINW</var> (“minimum width”), <var>PREFW</var> (“preferred
width”), <var>MINH</var> (“minimum height”) and <var>PREFH</var>
(“preferred height”). We can think of them as the minimum and
preferred dimensions of the slot in isolation, i.e., if it wasn't
constrained by other slots in the same row or column. They are defined
as follows:

<dl>
<dt><var>MINW</var>
<dd>
    <ul>
     <li>If the slot spans only columns whose width does not depend on
     the contents of the column (i.e., the column widths are specified
     with only <var>&lt;length&gt;</var> values, '*',
     <var>&lt;fraction&gt;</var> values, or any combination of those),
     then <var>MINW</var> is 0. <span class=note>(Note that
     <var>&lt;length&gt;</var> values can be specified with 'calc()'
     as well, see [CSS3VALUES]].)</span>

     <li>Otherwise, if the slot is <em>vertical,</em> then
     <var>MINW</var> is the <em>block dimension</em> of the slot, plus
     its horizontal padding, border and margin (i.e., any
     'margin-left', 'margin-right', etc., that is set on it by means
     of the '::slot()' pseudo-element).

     <li>Otherwise, if the slot spans at least one column whose width
     is specified as ''max-content'' (or 'minmax()' with a first
     argument of 'max-content'), then <var>MINW</var> is the intrinsic
     preferred width (see [[!CSS3BOX]]) of the slot plus its
     horizontal margin, border and padding.

     <li>Otherwise (i.e., the slot spans at least one column whose
     width is specified as ''min-content'' or ''minmax()'' with a
     first argument of ''min-content'', but no ''max-content'')
     <var>MINW</var> is the intrinsic minimum width (see [[!CSS3BOX]]
     of the slot, plus its horizontal padding, border and margin.
    </ul>

<dt><var>PREFW</var>
<dd>
    <ul>
     <li>If the slot spans only columns whose width does not depend on
     the contents of the column (i.e., the column widths are specified
     with only <var>&lt;length&gt;</var> values, '*',
     <var>&lt;fraction&gt;</var> values, or any combination of those),
     then <var>PREFW</var> is infinite.

     <li>Otherwise, if the slot is <em>vertical,</em> then
     <var>PREFW</var> is the <em>block dimension</em> of the slot, plus
     its horizontal padding, border and margin.

     <li>Otherwise, if the slot spans at least one column whose width
     is specified as ''max-content'' (or 'minmax()' with a first
     argument of 'max-content'), then <var>PREFW</var> is the intrinsic
     preferred width (see [[!CSS3BOX]]) of the slot plus its
     horizontal margin, border and padding.

     <li>Otherwise <var>PREFW</var> is the intrinsic minimum width
     (see [[!CSS3BOX]] of the slot, plus its horizontal padding,
     border and margin.
    </ul>

<dt><var>MINH</var>
<dd>
    <ul>
     <li>If the slot spans only rows whose height does not depend on
     the contents of the column (i.e., the row heights are specified
     with only <var>&lt;length&gt;</var> values, '*',
     <var>&lt;fraction&gt;</var> values, or any combination of those),
     then <var>MINH</var> is 0.

     <li>Otherwise, if the slot is <em>horizontal,</em> then
     <var>MINH</var> is the <em>block dimension</em> of the slot, plus
     its vertical padding, border and margin

     <li>Otherwise, if the slot spans at least one row whose height is
     specified as ''max-content'' (or 'minmax()' with a first argument
     of 'max-content'), then <var>MINH</var> is the intrinsic
     preferred height (see [[!CSS3BOX]]) of the slot plus its vertical
     margin, border and padding.

     <li>Otherwise <var>MINH</var> is the intrinsic minimum height
     (see [[!CSS3BOX]] of the slot, plus its vertical padding, border
     and margin.
    </ul>

<dt><var>PREFH</var>
<dd>
    <ul>
     <li>If the slot spans only rows whose height does not depend on
     the contents of the column (i.e., the row heights are specified
     with only <var>&lt;length&gt;</var> values, '*',
     <var>&lt;fraction&gt;</var> values, or any combination of those),
     then <var>MINH</var> is infinite.

     <li>Otherwise, if the slot is <em>horizontal,</em> then
     <var>PREFH</var> is the <em>block dimension</em> of the slot, plus
     its vertical padding, border and margin

     <li>Otherwise, if the slot spans at least one row whose height is
     specified as ''max-content'' (or 'minmax()' with a first argument
     of 'max-content'), then <var>PREFH</var> is the intrinsic
     preferred height (see [[!CSS3BOX]]) of the slot plus its vertical
     margin, border and padding.

     <li>Otherwise <var>PREFH</var> is the intrinsic minimum height
     (see [[!CSS3BOX]] of the slot, plus its vertical padding, border
     and margin.
    </ul>
</dl>

<div class=example>
   <p>For example, the <var>MINW</var> values of the slots in this grid

   <pre>grid: "    a      a      ."
      "    b      .      c"
      fit-content *    10em</pre>

   <p>are as follows:
   <dl>
    <dt>a <dd>'min-content' (because the slot spans at least one
    column with a width specified as 'min-content' or 'fit-content').

    <dt>b <dd>'min-content' (ditto).

    <dt>c <dd>0 (because the slot spans only columns with a width that
    is independent of the content).
   </dl>
</div>

<p>The UA must choose the widths and heights of all columns and rows
such that the following constraints are satisfied.

<ol>
   <!-- Constraints relating to the element's own width and
   height. These constraints may be dropped if overconstrained -->

   <li>
    <p>If the element has an a-priori known content height, then the
    sum of the heights of all rows must be equal to the element's
    height.

    <div class=example>
     <p>For example, the two rows in this grid must be 8em each so
     that the total height matches the height of the element:

     <pre>div {
  height: 16em;
  grid: "a.b" / *
        "ac." / * }</pre>
    </div>

   <li>
    <p>If the grid element has an a-priori known content width, then
    the sum of the widths of all columns must be equal to the
    element's width .

    <div class=example>
     <p>For example, the three columns in this grid must be 20em each:
     <pre>div {width: 60em; grid: "abc"}</pre>
    </div>

   <!-- Constraints relating to fixed-size rows and columns -->

   <li>Each row with a height specified as a <var>&lt;length&gt;</var>
   must have exactly that height.

   <li>Each column with a width specified as a
   <var>&lt;length&gt;</var> must have exactly that width.

   <!-- Constraints on rows and column with fractional sizes. -->

   <li>All rows with a height specified as '*' must have the same
   height.

    <p class=issue>If we have both '*' and 'fr', then '*' will be
    defined as '1fr' and we can drop this rule and the next. Otherwise
    either these two rules or the next two must be removed.

   <li>All columns with a width specified as '*' must have the same
   width.

   <li>For any pair (<var>i</var>,<var>j</var>) of rows whose
   <var>&lt;row-height&gt;</var> values h<sub>i</sub> and
   h<sub>j</sub> are both specified in 'fr', the computed heights
   H<sub>i</sub> and H<sub>j</sub> must be such that H<sub>i</sub> *
   h<sub>j</sub> = H<sub>j</sub> * h<sub>i</sub>. (I.e., their heights
   are proportional to their number of 'fr' units.)

   <li>For any pair (<var>i</var>,<var>j</var>) of columns whose
   <var>&lt;col-width&gt;</var> values w<sub>i</sub> and w<sub>j</sub>
   are both specified in 'fr', the computed width W<sub>i</sub> and
   W<sub>j</sub> must be such that W<sub>i</sub> * w<sub>j</sub> =
   W<sub>j</sub> * W<sub>i</sub>. (I.e., their widths are proportional
   to their number of 'fr' units.)

   <!-- Constraints relating to rows and columns without slots that
   span into other rows or columns, i.e., cases where the size of a
   slot can be used to put an upper limits on the size of a row or
   column -->

   <li>
    <p>Each row that contains slots that span only one row and no
    slots that span more than one row, must not be higher than the
    largest <var>PREFH</var> of all slots in the row.

    <div class=example>
     <p>For example, the third row in this grid

     <pre>grid: "a.c.." / 5em
      "a...."
      "....b"</pre>

     <p>must not be taller than the height (<span>block
     dimension</span>) of slot b. The first row contains a slot that
     spans two rows (slot a), so this rule does not apply to that row.
    </div>

   <li>
    <p>Each column that contains slots that span only one column and no
    slots that span more than one column, must not be wider than the
    largest <var>PREFW</var> of all slots in the column.

    <div class=example>
     <p>For example, in this grid

     <pre>grid: "ac"
      "ab"
      fit-content *</pre>

     <p>the first column must not be wider than the <var>PREFW</var>
     of slot a. Both slots in the second column have an infinite
     <var>PREFW</var>, so this rule effectively puts no constraint on
     that column.
    </div>

   <!-- Constraints on slots, only to set lower limits.  -->

   <li>Each slot must be at least as wide as its <var>MINW</var>.

   <li>Each slot must be at least as high as its <var>MINH</var>.
</ol>

<p>If it is impossible to choose such widths and heights, then try
without constraint 1. If it is still impossible, try without
constraint 2 instead. And, finally, try with both 1 and 2 dropped.

<div class=example>
<p>For example, the sum of the row heights in this example can never
be the same as the height of the element:
<pre>div {
  height: 20em;
  grid: "a b c" / 7em
        "a . c" / 7em }
</pre>
<p>The first constraint is therefore ignored, the rows are 7em each
and 6em of space below the grid remains empty.
</div>

<p>If there are multiple solutions, and constraint 1 was dropped or
did not apply, then the sizes must additionally be chosen such that
the sum of the heights of the rows is minimized.

<p>If there are still multiple solutions, and constraint 2 was dropped
or did not apply, then the sizes must additionally be chosen such that
the sum of the widths of the columns is minimized.

  <div class=example>
   <p>For example, there would be multiple solutions for this grid:

   <pre>&lt;DIV STYLE="float: left; grid: 'a.b'">
 &lt;P STYLE="flow: a">Two words
 &lt;P STYLE="flow: b">Only three words
&lt;/DIV></pre>

   <p>The columns must have equal width, but there is no other constraint on
    the width. They could be narrow:

   <blockquote>
    <p><code class=visible style="display:
    inline-block">Two  <br>words<br>     </code><code class=visible
    style="display: inline-block">     <br>     <br>     </code><code
    class=visible style="display:
    inline-block">Only <br>three<br>words</code>
   </blockquote>

   <p>or wider:

   <blockquote>
    <p><code class=visible style="display:
    inline-block">Two words       </code><code class=visible
    style="display: inline-block">                </code><code
    class=visible style="display:
    inline-block">Only three words</code>
   </blockquote>

   <p>or even wider still, e.g.:

   <blockquote>
    <p><code class=visible style="display:
    inline-block">Two words          </code><code class=visible
    style="display: inline-block">                   </code><code
    class=visible style="display:
    inline-block">Only three words   </code>
   </blockquote>

   <p>The rule to minimize height excludes the first, narrow
   solution. The rule to minimize width excludes the third and all
   wider solutions. So the second layout, the narrowest that has all
   words on one line, is the correct one.

   <p>(This example assumes the width of the floating DIV's containing
   block is large enough. The default width of a float is actually
   'fit-content', and thus if the containing block is too narrow, the
   result will be narrower, too, because the calculation will have to
   be redone using that width as the a-priori width for the DIV.)
  </div>

<p class=note>The width isn't known a-priori, if, e.g., 'width' is
''auto'' and the element is floating, absolutely positioned,
inline-block or a child of a block with vertical writing mode.


<p>An extra step may be necessary in paged media if a page break
occurs inside a template (only in the case of an <em>element-based
template,</em> see <a href="#element-based-page-break" >below</a>). If
the template, after computing the width and height, is too big to fit
on the current page, and if a suitable break point exists, the part of
the template after that break point is put on the next page. The width
of the containing block on that page may be different if that page has
different margins from the current page (see [[!CSS3PAGE]]) and thus
the width and height of that part of the template must be recalculated
in the new context.

<p class=note>Note that the widths of the columns can be completely
determined before laying out any of the contents as long as there are
no columns with a <var>&lt;col-width&gt;</var> of ''min-content'' or
''max-content''.

<p class=issue>Do we define restrictions or approximations for slots
that are part of a <em>chain</em> to avoid complicated optimization
algorithms?

<p class=note>Note: In a future update of CSS, rows might get a
property to specify how the height of that row is adjusted in case the
above calculation yields a template that is less tall than the element
itself.

<p>The height of a slot is measured as if the slot had one <dfn
title="anonymous block of a slot">anonymous block</dfn> as a child that
contains all the slot's contents and the anonymous
block is a <em>flow root</em> (see [[!CSS3BOX]]).

<div class=example>
<p>This example divides the window in three rows and three columns,
separated by 1em of white space. The middle row and the middle column
are flexible, the others are fixed at a specific size. The first
column is 5em wide, the last one 10em.

<pre>
&lt;style type="text/css"&gt;
  body {
    height: 100%;
    display: "a   .   b   .   c"  /2em
             ".   .   .   .   ."  /1em
             "d   .   e   .   f"
             ".   .   .   .   ."  /1em
             "g   .   h   .   i"  /2em
             5em 1em  *  1em 10em}
  #logo {position: a}
  #motto {position: b}
  #date {position: c}
  #main {position: e}
  #adv {position: f}
  #copy {position: g}
  #about {position: h}
&lt;/style&gt;
&lt;p id=logo&gt;&lt;img src=...
&lt;p id=motto&gt;Making Web pages since 1862
&lt;p id=date&gt;August 2, 2004
...</pre>
</div>

<p class=issue>[Add example with three columns, first two as narrow as
possible, third one taking up all remaining space.]



<h2 id=positioning>
Positioning content into a grid element</h2>

  <p><em>This section until the next subsection is not normative.</em>

  <p>Grids can be used in two different ways to position content. The
  first way is to flow content into slots (either into explicit slots
  identified by letters, or the default slot “*”). Each slot is an
  individual flow root (“establishes a block formatting context” in
  the terminology of CSS level 2), very much like a table cell.

  <p>The second way is to absolutely position elements using four
  <em>grid lines</em> to specify the positions of the four margin
  edges of the element. As positioned elements [[!CSS21]], these
  elements can overlap each other and the 'z-index' property applies
  to them.



<h3 id=flow>
Flowing content into slots: 'flow'</h3>

  <p>The 'flow' property adds an element to a slot.

  <table class=propdef>
    <tr>
      <th>Name:
      <td><dfn>flow</dfn>
    <tr>
      <th><a href="#values">Value</a>:
      <td>auto | <var>&lt;identifier&gt;</var> | '*'
    <tr>
      <th>Initial:
      <td>auto
    <tr>
      <th>Applies to:
      <td>elements with 'position' equal to 'static' or 'relative'
    <tr>
      <th>Inherited:
      <td>no
    <tr>
      <th>Animatable:
      <td>no
    <tr>
      <th>Percentages:
      <td>N/A
    <tr>
      <th>Computed&nbsp;value:
      <td>specified value
    <tr>
      <th>Canonical order:
      <td><abbr title="follows order of property value definition">per grammar</abbr>
  </table>

  <p>If the value is not 'auto', the element is added to the flow of
  the given slot, instead of to the flow of its parent.

  <p>If the element has no <span>grid ancestor</span>, or that grid
  ancestor has no slot of the given name, the effect is the same as
  for 'auto'.

  <div class=issue>
   <p>If the letter refers to a slot that doesn't exist in the
   element's <em>grid ancestor</em> (or there is no grid ancestor)
   what is the effect?
   <ol>
    <li>The element is not positioned (i.e., it is positioned in the
    current flow).

    <li>The letter is looked for in the grid ancestor's own grid
    ancestor, etc., recursively. If no slot of that name is found in
    any of them, then the element is not positioned.

    <li>The element is positioned in the default slot (i.e., as if
    '[grid-]position: *' had been specified); or not positioned at
    all, in case there is no grid ancestor.

    <li>The letter is looked for in the grid ancestor's own grid
    ancestor, etc., recursively. If no slot of that name is found in
    any of them, then the element is positioned in the default slot.
   </ol>
  </div>

  <p>All content flowed into the same slot, whether explicitly with
  'flow' or implicitly by flowing into the default slot, forms a
  single flow, with content in document order. The slot establishes a
  block formatting context and becomes the containing block of the
  resulting content flow. The boxes of elements flowed into the same
  slot explicitly (by means of 'flow') are each others siblings in the
  slot.

  <p>The content flowed into a slot does not inherit properties from
  the slot.

  <div class=example>
   <p>For example, the style sheet

   <pre>BODY {grid: "a." ".b"}
.paris {flow: a}
.london {flow: b}</pre>

   <p>with this document

   <pre>
&lt;DIV CLASS=london>
 &lt;P>The...
 &lt;DIV CLASS=paris>
  &lt;P>The...
  &lt;DIV CLASS=london>
   &lt;P>The...
  &lt;/DIV>
 &lt;/DIV>
&lt;/DIV></pre>

   <p>causes the second and third DIVs to be taken out of their
   parents. The second DIV becomes the first child of slot a (i.e., of
   the pseudo-element called '::slot(a)'). The third DIV becomes the
   sibling of the first DIV, because both are added to slot b
   independently.
  </div>

  <p class=note>Note that 'flow' applies to floating elements: they
  are floated relative to their containing block, and if their 'flow'
  property indicates a slot in a grid, that slot is their containing
  block. See also <a href="#float">“Floating elements inside
  templates”</a> below.

  <p class=issue>What if the numbers refer to a non-existing row or
  column? Automatically created (see repeating below)? Ignored?

<h3>
Absolute positioning using a grid: 'grid-column' and 'grid-row'</h3>

  <p class="issue">Trying to combine 'grid-row/column' and
  'grid-row/column-span', because they should not cascade
  independently. (If one style rule tries to place by start/end lines,
  and another tries to place by span, the result of the cascade will
  be a mess.)

  <p>The 'grid-column' and 'grid-row' properties can be used to
  absolutely position an element relative to a grid.

  <table class=propdef>
    <tr>
      <th>Name:
      <td><dfn>grid-row</dfn>, <dfn>grid-column</dfn>
    <tr>
      <th><a href="#values">Value</a>:
      <td>auto | <var>&lt;identifier&gt;</var> | '*' |
      <var>&lt;grid-track&gt;</var>
    <tr>
      <th>Initial:
      <td>auto
    <tr>
      <th>Applies to:
      <td>elements with 'position: absolute'
    <tr>
      <th>Inherited:
      <td>no
    <tr>
      <th>Animatable:
      <td>no
    <tr>
      <th>Percentages:
      <td>N/A
    <tr>
      <th>Computed&nbsp;value:
      <td>specified value
    <tr>
      <th>Canonical order:
      <td><abbr title="follows order of property value definition">per grammar</abbr>
  </table>

  <p>Here

  <pre class=prod><var>&lt;grid-track&gt;</var> = <var
    >&lt;integer&gt;</var> <var>&lt;integer&gt;</var>?
  </pre>

  <p>If the value of either or both of these properties is 'auto', the
  element is not positioned relative to a grid, but is positioned
  using 'top', 'right', 'bottom' and 'left' (see [[!CSS21]]).

  <p>If the value is an identifier or '*', the element is positioned
  such that its top and bottom margin edges (for 'grid-rows') or its
  left and right margin edges (for 'grid-columns') align with the
  corresponding margin edges of the slot of that name in the element's
  <span>grid ancestor.</span> ('*' refers to the <span>default
  slot.</span>) The 'top', 'right', 'bottom' and 'left' properties do
  not apply.

  <div class=example>
   <p>For example, these rules

   <pre>
DIV {grid: "ab" "cd"}
P {grid-row: a; grid-column: d}
   </pre>

   <p>mean that any P spans the same rows as slot a and spans the same
   columns as slot c. (In this case, that means it coincides with slot
   b.)
  </div>

  <p>If the value is given as ''<var>&lt;grid-track&gt;</var>'' and
  the second number is omitted, it is equal to the first + 1.

  <p>If the value is given as ''<var>&lt;grid-track&gt;</var>'', the
  element is positioned such that its top and bottom margin edges (for
  'grid-row') or left and right margin edges (for 'grid-column') align
  with the <em>grid lines</em> indicated by the two numbers.  The
  'top', 'right', 'bottom' and 'left' properties do not apply.

  <p>It is an error if the second number is less than the first, or if
  either number is zero.

  <p class=issue>Use negative number to count from the right/bottom?

  <p>Note that it is legal to specify the same edge twice,
  e.g. ''grid-rows: 1 1''. This simply makes a margin box with zero
  height.

  <p>If the element has no grid ancestor, or the value is a name that
  does not appear in its grid ancestor, or the value refers to grid
  lines that do not exist in the grid ancestor, then the effect is the
  same as if 'auto' had been specified.

  <p class=issue>This needs to be worked into the constraints for the
  calculation of the grid size, so that these absolutely positioned
  elements also contribute to the calculation of 'min-content' and
  'max-content'.


<h3>
Absolute positioning using a grid: 'top', 'right', 'bottom', 'right'</h3>

  <p class=issue>Instead of introducing properties 'grid-column' and
  'grid-row' that override 'top', 'right', 'bottom' and 'right', it
  might be better to extend those properties.

  <table class=propdef-extra>
    <tr>
      <th>Name:
      <td><dfn>top</dfn>, <dfn>right</dfn>, <dfn>bottom</dfn>, <dfn>left</dfn>
    <tr>
      <th><a href="#values">Value</a>:
      <td><var>&lt;identifier&gt;</var> | '*' | <var>&lt;integer&gt;</var>
  </table>

  <p>The new values for these properties refer to <em>grid lines</em>
  of the element's <span>grid ancestor</span> as follows:

  <p>An identifier or '*' refers to an edge of the slot of that name:
  the top edge if used on 'top', the right edge if used on 'right',
  the bottom edge if used on 'bottom', and the left edge if used on
  'left'. ('*' refers to the <span>default slot.</span>)

  <div class=example>
   <p>For example, these rules

   <pre>
DIV {grid: "ab"
           "cd"}
P {position: absolute; top: a; left: d}</pre>

   <p>mean that any P is positioned with its top at the top of the
   first row and its left at the left of the second column, i.e., at
   the top left corner of slot b. In other words, the declarations
   'top: b; left: b' would have meant the same thing.
  </div>

  <div class=example>
   <p>This example positions all four sides of an element at grid
   lines, so that the element will exactly overlap a given slot. (This
   assumes 'width' and 'height' have their default value of ''auto'.)

   <pre>
DIV {grid: "aaa"
           "bbb"}
DIV H2 {position: absolute; top: a; right: a;
  bottom: a; left: a}</pre>
  </div>

  <p>A number value refers to row grid lines (on 'top' and 'bottom')
  or to column grid lines (on 'left' and 'right').

  <p class=issue>Use negative number to count from the right/bottom?
  Then 'left: 1; right: -1' would make the element as wide as the
  grid, no matter how many columns it had.

  <p>A number '0' is an error.

  <p>If the value refers to a slot or grid line that does not exist in
  the <span>grid ancestor,</span> or if there is no grid ancestor, the
  value is treated as ''auto''.



<h3 id=grid-position>
The 'grid-position' shorthand property</h3>

  <table class=propdef>
    <tr>
      <th>Name:
      <td><dfn>grid-position</dfn>
    <tr>
      <th><a href="#values">Value</a>:
      <td>auto | <var>&lt;identifier&gt;</var> | '*' |
      <var>&lt;grid-track&gt;</var> / <var>&lt;grid-track&gt;</var>
    <tr>
      <th>Initial:
      <td>auto
    <tr>
      <th>Applies to:
      <td>elements with 'position: absolute'
    <tr>
      <th>Inherited:
      <td>no
    <tr>
      <th>Animatable:
      <td>no
    <tr>
      <th>Percentages:
      <td>N/A
    <tr>
      <th>Computed&nbsp;value:
      <td>specified value
    <tr>
      <th>Canonical order:
      <td><abbr title="follows order of property value definition">per grammar</abbr>
  </table>

  <p>This is a shorthand for 'grid-column' and 'grid-row'. The values
  have the following meaning:

  <dl>
   <dt>''auto'' <dd>Same as setting 'grid-column' and 'grid-row' both
   to auto.

   <dt><var>&lt;identifier&gt;</var> <dd>Same as setting 'grid-column'
   and 'grid-row' both to this value.

   <dt>''*'' <dd>Same as 'grid-column' and 'grid-row' both to '*'.

   <dt><var>&lt;grid-track&gt;</var> / <var>&lt;grid-track&gt;</var>
   <dd>Same as setting 'grid-column' to the value before the slash
   ('/') and 'grid-row' to the value after the slash.
  </dl>

  <p class=note>Note that some combinations cannot be expressed in the
  shorthand, e.g., 'grid-column: a; grid-row: b'. On the other hand,
  'grid-column: auto; grid-row: b' is the same as 'grid-position:
  auto'

  <p class=issue>It is also possible to re-use 'position' instead of a
  new 'grid-position' property. Advantage: no new property to
  learn. Disadvantage: difficult to make 'position' into a shorthand
  for 'grid-column' and 'grid-row'.

<div class=issue>
<p>css3-grid-align allows to define a position either by saying how
many rows/columns it spans, or by saying  at which row and column
it ends. Some possible interpretations of four numbers:
<ol>
<li>''1 5 / 3 4'' = start at column 1 row 3, span 5 columns and 4 rows
<pre>
. . . . . . .
. . . . . . .
x x x x x . .
x x x x x . .
x x x x x . .
x x x x x . .
. . . . . . .
</pre>
<li>''1 to 5 / 3 to 4'' = start at column 1 row 3, end with column 5 row 4
<pre>
. . . . . . .
. . . . . . .
x x x x x . .
x x x x x . .
. . . . . . .
. . . . . . .
. . . . . . .
</pre>
<li>''1 to 5 / 3 to 4'' = start at column 1 row 3, end <em>before</em> column
5 row 4
<pre>
. . . . . . .
. . . . . . .
x x x x . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
</pre>
</ol>

<p>Do we need only one? Which one is the easiest to remember?
</div>
 
  <p class=issue>Do we need keywords such as ''same'' (position into
  same slot as the preceding element with the same grid ancestor),
  ''next-row'' (position into the next slot below the preceding
  element with the same grid ancestor), ''next-column'; or ''next''?

  

<h3 id=float>
Floating elements inside templates</h3>

  <p>An element may be positioned inside a template (with
  'flow') and be a floating element ('float' property) at
  the same time. The following cases must be distinguished:

  <dl>
  <dt><a
href="https://www.w3.org/TR/2011/WD-css3-gcpm-20111129/#page-floats"
>Page floats</a>
  <dd>
  <p>For the purpose of page floats [[!CSS3PAGE]], the slot acts as a
  page.

  <p class=example>For example, if an element has 'float: top', it
  floats to the top of the slot (or the top of the current column, if
  it has a <span>multicolumn element</span> as ancestor that is nearer
  than its <span>grid ancestor</span>).

  <dt>Other floats
  <dd>
  <p>In other cases, the element floats
  normally within its containing block, which in this case is its slot
  in the template (as defined <a href="#containing-block">above</a>).
  </dl>



<h2 id=slot-pseudo>Styling named slots: the ''::slot()'' pseudo-element</h2>

  <p>The slots of a <i>grid element</i> can be individually
  addressed with the <dfn>''::slot()''</dfn> pseudo-element.
  
  <div class=example>
    <p>For example, the following sets the background color and 
    vertical alignment of some of the slots in a template:
    
    <pre>
<!-- -->body { grid: "aaa"
<!-- -->             "bcd" }
<!-- -->body::slot(b) { background: #FF0 }
<!-- -->body::slot(c), body::slot(d) { vertical-align: bottom }</pre>
  </div>

  <p class=issue>The ''::slot()'' pseudo-element can also be used to
  create slots that overlap with other slots?

  <div class="example issue">
    <p>For example, the following creates a slot that overlaps two other
    slots. The slot z starts at the top left and is one column wide
    and two rows high, overlapping the left third of the a slot and
    the whole of the b slot.

  <pre>
<!-- -->body { grid: "aaa"
<!-- -->             "bcd" }
<!-- -->body::slot(foo) { position: 1 1 / 1 2 }</pre>
  </div>

  <p>If a '::slot()' pseudo-element refers to a name that already exists
  in the element's grid template, than any 'position' property on that
  pseudo-element is ignored.
  
  <p>If a '::slot()' pseudo-element defines a new slot that coincides
  exactly with another slot in the element's grid element, then it is in
  fact the same slot, and the new name is an alias for that
  slot. <span class=issue>Unless it has a different 'z-index'? Or are
  slots independent, even if they have the same position?</span>
  
  <p>Only the following properties apply to the '':slot()''
  pseudo-element:

  <ul>
    <li>background properties
    <li>'vertical-align' (see <a href="#vertical-align">“vertical
    alignment”</a> below)
    <li>'overflow' (see the sections on <a
    href="#vertical-align">vertical alignment</a> and <a
    href="#paged">paged media</a> below)
    <li class=issue>'writing-mode' (The default
	writing mode of a slot is the writing mode of the grid element itself.)
    <li class=issue>'direction'
    <li>'box-shadow'
    <li>border properties <span class=issue
    >(<a href="http://www.w3.org/Style/CSS/Tracker/issues/37"
    >ISSUE-37:</a> Can a slot have a border and if so, where is it
    drawn?)</span>
    <li>padding properties
    <li>'box-decoration-break'
    <li>column properties
    <li>'content' <span class=issue>Useful? Gives the first content for
    the slot, more can be added by positioning other elements in the
    slot.)</span>
    <li class=issue>margins [to align the contents of the slot to sides or center
      with 'auto']
    <li class=issue>'z-index' [if margins can be negative, slots can overlap]
  </ul>

  <p>The background of a slot is drawn immediately on top of the
  background of the element itself. E.g., the background set on
  ''P::slot(a)'' is immediately in front of the background set on ''P''.
  
  <p class=issue>Need to define the width when a slot has padding and
  border, including when the width is too small.

  <p class=issue>Do the margins of a slot collapse with the margins of
  elements that are flowed into the slot?



<h2 id=slot-layout>
Layout within a slot</h2>

  <p class=issue>Can use the margins of the '::slot()'' pseudo, or
  re-use the 'vertical-align' property (bottom, top, middle, baseline),
  or a new property ('flex-align'?) [Using 'margin' means there needs to
  be another property if baseline alignment is required.]

  <div class="sidefigure">
    <div class="figure">
      <p><img alt="FIXME" src="images/horizontal-tb-dir-ltr.png" />
      <p class="caption">Latin-based language row and column orientation.</p>
    </div>
    <div class="figure">
      <p><img alt="FIXME" src="images/horizontal-tb-dir-rtl.png" />
      <p class="caption">Arabic language row and column orientation.</p>
    </div>    
    <div class="figure">
      <p><img alt="FIXME" src="images/vertical-rl.png" />
      <p class="caption">East Asian language row and column orientation.</p>
    </div>
  </div>

  <p>A <i>grid item</i>'s alignment within its Cell can
  be controlled by using the 'grid-column-align' and 'grid-row-align'
  properties. Alignment refers to the logical edges of the
  <i>grid item</i>'s <i>slot</i>.

  <p>The <dfn>start</dfn> edge of a column is defined by the inline base
  direction. The <dfn>start</dfn> edge of a row is defined by block flow
  direction.  The alignment values refer to the edge of the <i>grid item</i>'s
  slot against which the <i>grid item</i> will align one of its edges. 
  Which edge of the <i>grid item</i> actually aligns against the specified
  edge of the Cell is dependent on whether the <i>grid item</i> shares the
  same inline text direction and block flow direction as the <i>grid element</i>.
  All descriptions below assume that the <i>grid item</i> shares the same
  inline text direction and block flow direction as the <i>grid element</i>.  
  Refer to the <a href="https://www.w3.org/TR/css3-writing-modes/">CSS Writing
  Modes Module Level 3</a> for more details about the relationship between
  parent and child elements with differing writing-modes, and for the
  definitions of inline direction and block flow direction.
  [[!CSS3-WRITING-MODES]]

  <div class=example>
    <p>The next three figures illustrate the placement and orientation of
    the <i title="grid element">grid element's</i> rows, columns, and <i>grid items</i> using
    different writing modes on the <i>grid element</i>. In each of the
    figures, the markup shown in the following example is used to place
    <i>grid item</i> A in column 1, row 1, and <i>grid item</i> B in
    column 2, row 2. 
    <i>Grid item</i> A is aligned in each figure to the starting edges of
    its row and column.  
    <i>Grid item</i> B is aligned in each figure to the ending edges of
    its row and column.
    <pre>&lt;style type="text/css"&gt;
    #grid { display: grid; grid-columns: 1fr 1fr; grid-rows: 1fr 1fr }
    #A { grid-column: 1; grid-row: 1; grid-column-align: start; grid-row-align: start }
    #B { grid-column: 2; grid-row: 2; grid-column-align: end; grid-row-align: end }
&lt;/style&gt;

&lt;div id="grid"&gt;
    &lt;div id="A"&gt;A&lt;/div&gt;
    &lt;div id="B"&gt;B&lt;/div&gt;
&lt;/div&gt;</pre>
  </div>


<h3 id=alignment>
Alignment</h3>

  <p class=issue>We need a general way to align and center content and
  elements in a fixed-size parent. The Positioning module proposes
  'position: center', but it only applies to absolutely positioned
  elements and it only centers. ''Auto'' margins are limited to
  aligning horizontally and they fail to center when the element is
  wider than its parent. 'Vertical-align' applies to table cells and
  could apply to slots (and it has a useful ''baseline'' value), but
  only aligns vertically. 'Text-align: center' fails to center when
  there is a float next to the line box&hellip;

  <table id="grid-column-align-property" class="propdef">
    <tr>
        <th>Name:</th>
        <td><dfn id="grid-column-align">grid-column-align</dfn></td>
    </tr>
    <tr>
        <th>Value:</th>
        <td>'start' | 'end' | 'center' | 'stretch'</td>
    </tr>
    <tr>
        <th>Initial:</th>
        <td>'stretch'</td>
    </tr>
    <tr>
        <td>Applies to:</td>
        <td>Grid Item elements</td>
    </tr>
    <tr>
        <td>Inherited:</td>
        <td>no</td>
    </tr>
    <tr>
        <td>Percentages:</td>
        <td>n/a</td>
    </tr>
    <tr>
        <td>Computed value:</td>
        <td>specified value</td>
    </tr>
  </table>
  <dl>
    <dt><dfn>''start''</dfn>
    <dd>
      Aligns the starting edge of the <i>grid item</i>'s margin box
      to the starting edge of the <i>grid item</i>'s column.
    </dd>
    <dt><dfn>''end''</dfn>
    <dd>
      Aligns the end edge of the <i>grid item</i>'s margin box to the
      end edge of the <i>grid item</i>'s column.
    </dd>
    <dt><dfn>''center''</dfn>
    <dd>
      Places the center of the <i>grid item</i>'s margin box at the
      center of the <i>grid item</i>'s column.
    </dd>
    <dt><dfn>''stretch''</dfn>
    <dd>
      Ensures that the <i>grid item</i>'s margin box is equal to the
      size of the <i>grid item</i>'s column.
    </dd>
  </dl>

  <table id="grid-row-align-property" class="propdef">
    <tr>
        <td>Name:</td>
        <td><dfn id="grid-row-align">grid-row-align</dfn></td>
    </tr>
    <tr>
        <th>Value:</th>
        <td>'start' | 'end' | 'center' | 'stretch'</td>
    </tr>
    <tr>
        <td>Initial:</td>
        <td>'stretch'</td>
    </tr>
    <tr>
        <td>Applies to:</td>
        <td>Grid Item elements</td>
    </tr>
    <tr>
        <td>Inherited:</td>
        <td>no</td>
    </tr>
    <tr>
        <td>Percentages:</td>
        <td>n/a</td>
    </tr>
    <tr>
        <td>Computed value:</td>
        <td>specified value</td>
    </tr>
  </table>
  <dl>
    <dt><dfn>''start''</dfn>
    <dd>
      Aligns the starting edge of the <i>grid item</i>'s margin box
      to the starting edge of the <i>grid item</i>'s row.
    </dd>
    <dt><dfn>''end''</dfn>
    <dd>
      Aligns the end edge of the <i>grid item</i>'s margin box to the
      end edge of the <i>grid item</i>'s row.
    </dd>
    <dt><dfn>''center''</dfn>
    <dd>
      Places the center of the <i>grid item</i>'s margin box at the
      center of the <i>grid item</i>'s row.
    </dd>
    <dt><dfn>''stretch''</dfn>
    <dd>
      Ensures that the <i>grid item</i>'s margin box is equal to the
      size of the <i>grid item</i>'s row.
    </dd>
  </dl>

<h3 id=sizing>
Calculating the Size of Grid Items</h3>

  <p>The values ''start'', ''end'', and ''center'' all cause the
  <i>grid item</i> to produce a box sized shrink-to-fit for its
  cell in accordance with the
  <a href="https://www.w3.org/TR/css3-box/#shrink-to-fit">CSS3 Box Model</a>.
  Note that percentage lengths specified on a <i>grid item</i>
  resolve against the dimensions of the <i>grid slot</i> (i.e.
  the slot serves as the containing block for the <i>grid item</i>).
  Percentages specified for margin-top, padding-top, margin-bottom,
  and padding-bottom resolve against the height of the grid cell,
  rather than the width of the grid slot. 
  If the <i>min-content</i> size of the <i>grid item</i>'s box is
  greater than the size of its slot, it will overflow the bounds
  of its slot in a direction determined by its alignment.

  <p>A value of ''stretch'' causes the <i>grid item</i>'s to take
  the <i>fill-available</i> size. Note that this calculation is
  symmetric for both the width and height of the <i>grid item</i>.



<h3 id=vertical-alignment>
Vertical alignment</h3>

  <p>The 'vertical-align' property of a '::slot()' pseudo-element can
  be used to align content vertically in a slot. We assume the content
  of a slot is wrapped in an anonymous block box (similar to the cell
  box in a table cell, see [[!CSS21]]). That box is aligned inside the
  slot according to the value of 'vertical-align':

  <dl>

  <dt>bottom

  <dd>The content of the slot is aligned to the bottom of the slot:
  the bottom margin edge of the anonymous block coincides with the
  bottom of the slot.

  <dt>middle

  <dd>The content of the slot is vertically centered in the slot: the
  distance between the top margin edge of the anonymous block and the
  top of the slot is equal to the distance between the bottom margin
  edge of the anonymous block and the bottom of the slot. <span
  class=note>(Note that if the content overflows the slot, it will
  overflow both at the top and at the bottom.)</span>

  <dt>baseline

  <dd>The anonymous block that encloses the content is placed as high
  as possible under two constraints:
  <ol>
  <li>The top margin edge of the anonymous block may not be higher
  than the top edge of the slot.

  <li>The topmost baseline in the content may not be higher than the
  topmost baseline of content in any other slot in the same row that
  also has 'vertical-align: baseline'. Baselines of content inside
  floats are not taken into account. Slots that span several rows are
  considered to occur in their topmost row.
  </ol>
</dl>

<p>For all other values, the content is top aligned: the top margin
edge of the anonymous box coincides with the top edge of the slot.



<h2 id="conformance">
Conformance</h2>

<h3 id="conventions">
Document conventions</h3>

  <p>Conformance requirements are expressed with a combination of
  descriptive assertions and RFC 2119 terminology. The key words “MUST”,
  “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
  “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
  document are to be interpreted as described in RFC 2119.
  However, for readability, these words do not appear in all uppercase
  letters in this specification.
  
  <p>All of the text of this specification is normative except sections
  explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
  
  <p>Examples in this specification are introduced with the words “for example”
  or are set apart from the normative text with <code>class="example"</code>,
  like this:
  
  <div class="example">
    <p>This is an example of an informative example.</p>
  </div>
  
  <p>Informative notes begin with the word “Note” and are set apart from the
  normative text with <code>class="note"</code>, like this:
  
  <p class="note">Note, this is an informative note.</p>

<h3 id="conformance-classes">
Conformance classes</h3>

  <p>Conformance to <var class="replaceme">CSS TEMPLATE Module</var>
  is defined for three conformance classes:
  <dl>
    <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
      <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
      style sheet</a>.
    <dt><dfn>renderer</dfn></dt>
      <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
      that interprets the semantics of a style sheet and renders
      documents that use them.
    <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
      <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
      that writes a style sheet.
  </dl>
  
  <p>A style sheet is conformant to <var class="replaceme">CSS TEMPLATE Module</var>
  if all of its statements that use syntax defined in this module are valid
  according to the generic CSS grammar and the individual grammars of each
  feature defined in this module.
  
  <p>A renderer is conformant to <var class="replaceme">CSS TEMPLATE Module</var>
  if, in addition to interpreting the style sheet as defined by the
  appropriate specifications, it supports all the features defined
  by <var class="replaceme">CSS TEMPLATE Module</var> by parsing them correctly
  and rendering the document accordingly. However, the inability of a
  UA to correctly render a document due to limitations of the device
  does not make the UA non-conformant. (For example, a UA is not
  required to render color on a monochrome monitor.)
  
  <p>An authoring tool is conformant to <var class="replaceme">CSS TEMPLATE Module</var>
  if it writes style sheets that are syntactically correct according to the
  generic CSS grammar and the individual grammars of each feature in
  this module, and meet all other conformance requirements of style sheets
  as described in this module.

<h3 id="partial">
Partial implementations</h3>

  <p>So that authors can exploit the forward-compatible parsing rules to
  assign fallback values, CSS renderers <strong>must</strong>
  treat as invalid (and <a href="https://www.w3.org/TR/CSS21/conform.html#ignore">ignore
  as appropriate</a>) any at-rules, properties, property values, keywords,
  and other syntactic constructs for which they have no usable level of
  support. In particular, user agents <strong>must not</strong> selectively
  ignore unsupported component values and honor supported values in a single
  multi-value property declaration: if any value is considered invalid
  (as unsupported values must be), CSS requires that the entire declaration
  be ignored.</p>
  
<h3 id="experimental">
Experimental implementations</h3>

  <p>To avoid clashes with future CSS features, the CSS2.1 specification
  reserves a <a href="https://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
  syntax</a> for proprietary and experimental extensions to CSS.
  
  <p>Prior to a specification reaching the Candidate Recommendation stage
  in the W3C process, all implementations of a CSS feature are considered
  experimental. The CSS Working Group recommends that implementations
  use a vendor-prefixed syntax for such features, including those in
  W3C Working Drafts. This avoids incompatibilities with future changes
  in the draft.
  </p>
 
<h3 id="testing">
Non-experimental implementations</h3>

  <p>Once a specification reaches the Candidate Recommendation stage,
  non-experimental implementations are possible, and implementors should
  release an unprefixed implementation of any CR-level feature they
  can demonstrate to be correctly implemented according to spec.
  
  <p>To establish and maintain the interoperability of CSS across
  implementations, the CSS Working Group requests that non-experimental
  CSS renderers submit an implementation report (and, if necessary, the
  testcases used for that implementation report) to the W3C before
  releasing an unprefixed implementation of any CSS features. Testcases
  submitted to W3C are subject to review and correction by the CSS
  Working Group.
  
  <p>Further information on submitting testcases and implementation reports
  can be found from on the CSS Working Group's website at
  <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
  Questions should be directed to the
  <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
  mailing list.

<h3 id="cr-exit-criteria">
CR exit criteria</h3>

  <p class=issue>[Change or remove the following CR exit criteria if
  the spec is not a module, but, e.g., a Note or a profile. This text was <a
  href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p>

  <p>
  For this specification to be advanced to Proposed Recommendation,
  there must be at least two independent, interoperable implementations
  of each feature. Each feature may be implemented by a different set of
  products, there is no requirement that all features be implemented by
  a single product. For the purposes of this criterion, we define the
  following terms:
  
  <dl>
    <dt>independent <dd>each implementation must be developed by a
    different party and cannot share, reuse, or derive from code
    used by another qualifying implementation. Sections of code that
    have no bearing on the implementation of this specification are
    exempt from this requirement.
  
    <dt>interoperable <dd>passing the respective test case(s) in the
    official CSS test suite, or, if the implementation is not a Web
    browser, an equivalent test. Every relevant test in the test
    suite should have an equivalent test created if such a user
    agent (UA) is to be used to claim interoperability. In addition
    if such a UA is to be used to claim interoperability, then there
    must one or more additional UAs which can also pass those
    equivalent tests in the same way for the purpose of
    interoperability. The equivalent tests must be made publicly
    available for the purposes of peer review.
  
    <dt>implementation <dd>a user agent which:
  
    <ol class=inline>
      <li>implements the specification.
  
      <li>is available to the general public. The implementation may
      be a shipping product or other publicly available version
      (i.e., beta version, preview release, or “nightly build”). 
      Non-shipping product releases must have implemented the
      feature(s) for a period of at least one month in order to
      demonstrate stability.
  
      <li>is not experimental (i.e., a version specifically designed
      to pass the test suite and is not intended for normal usage
      going forward).
    </ol>
  </dl>
  
  <p>The specification will remain Candidate Recommendation for at least
  six months.

<h2 class=no-num id="acknowledgments">
Acknowledgments</h2>

  <p><var class="replaceme">[acknowledgments]</var></p>

<h2 class=no-num id="references">
References</h2>

<h3 class="no-num" id="normative-references">
Normative references</h3>
<!--normative-->

<h3 class="no-num" id="other-references">
Other references</h3>
<!--informative-->

<h2 class="no-num" id="index">
Index</h2>
<!--index-->

<h2 class="no-num" id="property-index">
Property index</h2>
<!-- properties -->

</body>
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
sgml-omittag:nil
sgml-shorttag:nil
sgml-namecase-general:t
sgml-general-insert-case:lower
sgml-always-quote-attributes:t
sgml-indent-step:nil
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
-->
